<template>
	<view class="evaluatePerson">
		<view class="technicianList flex">
			<image class="img" :src="evaluateTechDetail.avatar" alt="" />
			<!-- <image class="img" :src="baseImgUrl + 'img_common_tech.png'" alt="" /> -->
			<view class="flex1">
				<view class="flexjsbac technicianName">
					<text>{{ evaluateTechDetail.name }}</text>
					<!-- <text class="waitStatus">待评价</text> -->
				</view>
				<view class="list_con">
					<view class="flexJcac">
						<u-icon name="order" color="#666666" size="22"></u-icon>
						<view class="text">
							{{ evaluateTechDetail.synopsis }}
						</view>
					</view>
					<view class="detail" @click="pageTo(evaluateTechDetail.id)">详情>></view>
				</view>
				<view class="flexjsbac">
					<view class="flexJcac">
						<u-icon name="clock" color="#666666" size="20"></u-icon>
						{{ evaluateTechDetail.createTime }}
					</view>
				</view>
			</view>
		</view>
		<view class="evaluate_con">
			<view class="title">
				*请你为本次服务评分
			</view>
			<view class="evaluate_rate flexjsbac" v-for="(item,index) in zyEvaluationRuleItemVos">
				<text>{{item.evaluateProblem}}</text>
				<u-rate v-model="enthusiasm[`enthusiasm${index}`]" active-color="#FFCC5E" inactive-color="#FFCC5E"
					gutter="5"></u-rate>
			</view>
			<!-- <view class="evaluate_rate flexjsbac">
				<text>调理师的服务是否满意？</text>
				<u-rate v-model="satisfaction" active-color="#FFCC5E" inactive-color="#FFCC5E" gutter="5"></u-rate>
			</view>
			<view class="evaluate_rate flexjsbac">
				<text>调理师的服务是否专业？</text>
				<u-rate v-model="profession" active-color="#FFCC5E" inactive-color="#FFCC5E" gutter="5"></u-rate>
			</view> -->
			<view style="pointer-events: all;">
				<u--textarea style="pointer-events: all;" v-model="evaluateText" placeholder="讲一讲对本次服务的体验吧~"></u--textarea>
			</view>
		</view>
	</view>
</template>

<script>
	import pageConfig from '@/config'
	export default {
		name: 'EvaluatePerson',
		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				enthusiasm: {},
				evaluateText: ''
			}
		},
		props: {
			evaluateTechDetail: {
				type: Object,
				default: {}
			},
			zyEvaluationRuleItemVos: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			click(){
				console.log(111111111111111111111);
			},
			getEvaluateData() {
				const enthusiasmKeys =Object.keys(this.enthusiasm).filter(key => key.includes('enthusiasm')).map(key => this.enthusiasm[key]);;
				let zyTechnicianEvaluateItemDtos = []
				for (let i in enthusiasmKeys) {
					zyTechnicianEvaluateItemDtos.push({
						issue: this.zyEvaluationRuleItemVos[i].evaluateProblem,
						maxScore: 5,
						score:enthusiasmKeys[i],
					})
				}
				console.log(zyTechnicianEvaluateItemDtos,this.evaluateText,'zyTechnicianEvaluateItemDtos');
				return {
					zyTechnicianEvaluateItemDtos: zyTechnicianEvaluateItemDtos,
					evaluateText: this.evaluateText
				}
			},
			pageTo(id) {
				uni.navigateTo({
					url: `/subPages/technician/technicianDetail?id=${id}`,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluatePerson {
		pointer-events: all;
		.evaluate_con {
			padding: 24rpx;
			background-color: #ffffff;

			.title {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}

			.evaluate_rate {
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
				border-bottom: 1px solid #E6E6E6;
				height: 80rpx;
			}
		}

		.technicianList {
			padding: 24rpx;
			border-bottom: 1px solid #E6E6E6;

			.technicianName {
				font-size: 30rpx;
				font-weight: 600;
				letter-spacing: 0rpx;
				line-height: 43.44rpx;
				color: #333333;
				text-align: left;
				vertical-align: top;

				.waitStatus {
					font-size: 24rpx;
					font-weight: 400;
					color: #FF0000;
				}
			}

			.discount {
				color: #666666;
				font-size: 18rpx;
				font-weight: 400;
				align-items: flex-end;

				view {
					display: flex;
					align-items: flex-end;
					margin-right: 10rpx;
				}

				.discount_de {
					font-size: 40rpx;
					font-weight: 700;
					color: #FE4D4F;
					text-align: center;
					vertical-align: top;
				}
			}

			.list_con {
				margin: 15rpx 0;
				width: 100%;

				.flexJcac {
					width: 100%;
					display: flex;

					.text {
						width: 100%;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 控制行数 */
						-webkit-box-orient: vertical;
					}
				}

				.detail {
					color: #ffd271;
				}
			}

			.img {
				width: 128rpx;
				height: 128rpx;
				margin-right: 24rpx;
			}
		}

	}
</style>